<!--
 * @Author: AuroCaffe 18509564594@163.com
 * @Date: 2025-07-26 16:24:10
 * @LastEditors: AuroCaffe 18509564594@163.com
 * @LastEditTime: 2025-07-26 16:24:56
 * @FilePath: \HuiLin\pages\mePages\shopCenter\settings.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="settings-container">
		<!-- 头部导航栏 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content">
					<view class="header-left" @click="closePage">
						<text class="cuIcon-back"></text>
					</view>
					<view class="header-center">
						<text class="header-title">店铺设置</text>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 基本信息 -->
			<view class="settings-section">
				<view class="section-title">基本信息</view>
				<view class="form-group">
					<view class="form-item">
						<text class="form-label">店铺名称</text>
						<input 
							class="form-input" 
							v-model="shopInfo.name" 
							placeholder="请输入店铺名称"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">店铺简介</text>
						<textarea 
							class="form-textarea" 
							v-model="shopInfo.description" 
							placeholder="请输入店铺简介"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">联系电话</text>
						<input 
							class="form-input" 
							v-model="shopInfo.phone" 
							placeholder="请输入联系电话"
							type="number"
						/>
					</view>
				</view>
			</view>

			<!-- 店铺头像 -->
			<view class="settings-section">
				<view class="section-title">店铺头像</view>
				<view class="avatar-section">
					<image class="shop-avatar" :src="shopInfo.image || '/static/logo-orange.png'" mode="aspectFill"></image>
					<button class="upload-btn" @click="uploadAvatar">更换头像</button>
				</view>
			</view>

			<!-- 营业设置 -->
			<view class="settings-section">
				<view class="section-title">营业设置</view>
				<view class="form-group">
					<view class="form-item">
						<text class="form-label">营业状态</text>
						<switch 
							:checked="shopInfo.status === 'active'" 
							@change="toggleStatus"
							color="#667eea"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">营业时间</text>
						<view class="time-picker">
							<picker 
								mode="time" 
								:value="shopInfo.openTime" 
								@change="onOpenTimeChange"
							>
								<text class="time-text">{{ shopInfo.openTime || '请选择' }}</text>
							</picker>
							<text class="time-separator">至</text>
							<picker 
								mode="time" 
								:value="shopInfo.closeTime" 
								@change="onCloseTimeChange"
							>
								<text class="time-text">{{ shopInfo.closeTime || '请选择' }}</text>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<!-- 配送设置 -->
			<view class="settings-section">
				<view class="section-title">配送设置</view>
				<view class="form-group">
					<view class="form-item">
						<text class="form-label">配送服务</text>
						<switch 
							:checked="shopInfo.deliveryEnabled" 
							@change="toggleDelivery"
							color="#667eea"
						/>
					</view>
					<view class="form-item" v-if="shopInfo.deliveryEnabled">
						<text class="form-label">配送费</text>
						<input 
							class="form-input" 
							v-model="shopInfo.deliveryFee" 
							placeholder="请输入配送费"
							type="digit"
						/>
					</view>
					<view class="form-item" v-if="shopInfo.deliveryEnabled">
						<text class="form-label">起送金额</text>
						<input 
							class="form-input" 
							v-model="shopInfo.minOrderAmount" 
							placeholder="请输入起送金额"
							type="digit"
						/>
					</view>
				</view>
			</view>

			<!-- 其他设置 -->
			<view class="settings-section">
				<view class="section-title">其他设置</view>
				<view class="form-group">
					<view class="form-item">
						<text class="form-label">自动接单</text>
						<switch 
							:checked="shopInfo.autoAccept" 
							@change="toggleAutoAccept"
							color="#667eea"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">订单提醒</text>
						<switch 
							:checked="shopInfo.orderNotification" 
							@change="toggleNotification"
							color="#667eea"
						/>
					</view>
				</view>
			</view>
		</view>
		<!-- <button class="save-button" @click="saveSettings">保存设置</button> -->
	</view>
</template>

<script>
import headerSlot from '@/components/header-slot.vue'
import { getShopSettings, updateShopSettings } from '@/api/shop.js'

export default {
	components: {
		headerSlot
	},
	data() {
		return {
			shopInfo: {
				name: '',
				description: '',
				phone: '',
				image: '',
				status: 'active',
				openTime: '09:00',
				closeTime: '22:00',
				deliveryEnabled: true,
				deliveryFee: 5,
				minOrderAmount: 20,
				autoAccept: false,
				orderNotification: true
			},
			loading: false
		}
	},
	onShow() {
		this.loadShopInfo()
	},
	methods: {
		// 关闭页面
		closePage() {
			uni.navigateBack()
		},
		
		// 加载店铺信息
		async loadShopInfo() {
			try {
				this.loading = true
				const res = await getShopSettings()
				if (res.code === 200) {
					this.shopInfo = { ...this.shopInfo, ...res.data }
				}
			} catch (error) {
				console.error('加载店铺信息失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 保存设置
		async saveSettings() {
			try {
				this.loading = true
				const res = await updateShopSettings(this.shopInfo)
				if (res.code === 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				}
			} catch (error) {
				console.error('保存失败:', error)
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 上传头像
		uploadAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					// 这里应该调用上传API
					// uploadImage(tempFilePath).then(imageUrl => {
					// 	this.shopInfo.image = imageUrl
					// })
					
					// 模拟上传
					this.shopInfo.image = tempFilePath
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					})
				}
			})
		},
		
		// 切换营业状态
		toggleStatus(e) {
			this.shopInfo.status = e.detail.value ? 'active' : 'inactive'
		},
		
		// 切换配送服务
		toggleDelivery(e) {
			this.shopInfo.deliveryEnabled = e.detail.value
		},
		
		// 切换自动接单
		toggleAutoAccept(e) {
			this.shopInfo.autoAccept = e.detail.value
		},
		
		// 切换订单提醒
		toggleNotification(e) {
			this.shopInfo.orderNotification = e.detail.value
		},
		
		// 营业时间选择
		onOpenTimeChange(e) {
			this.shopInfo.openTime = e.detail.value
		},
		
		onCloseTimeChange(e) {
			this.shopInfo.closeTime = e.detail.value
		}
	}
}
</script>

<style lang="scss" scoped>
.settings-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: 120rpx;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 32rpx;
	background: transparent;
}

.header-left, .header-right {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.header-center {
	flex: 1;
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
}

.main-content {
	padding: 32rpx;
}

.settings-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10rpx);
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 32rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		
		.section-icon {
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #fff;
			margin-right: 16rpx;
		}
	}
	
	.form-group {
		margin-bottom: 32rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.form-label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
			font-weight: bold;
		}
		
		.form-input {
			width: 100%;
			padding: 24rpx;
			border: 1rpx solid #e9ecef;
			border-radius: 16rpx;
			font-size: 28rpx;
			background: #f8f9fa;
			transition: all 0.3s ease;
			
			&:focus {
				border-color: #667eea;
				background: #fff;
				box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
			}
		}
		
		.form-textarea {
			width: 100%;
			padding: 24rpx;
			border: 1rpx solid #e9ecef;
			border-radius: 16rpx;
			font-size: 28rpx;
			background: #f8f9fa;
			min-height: 120rpx;
			transition: all 0.3s ease;
			
			&:focus {
				border-color: #667eea;
				background: #fff;
				box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
			}
		}
		
		.form-select {
			width: 100%;
			padding: 24rpx;
			border: 1rpx solid #e9ecef;
			border-radius: 16rpx;
			font-size: 28rpx;
			background: #f8f9fa;
			transition: all 0.3s ease;
			
			&:focus {
				border-color: #667eea;
				background: #fff;
				box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
			}
		}
		
		.time-range {
			display: flex;
			align-items: center;
			gap: 16rpx;
			
			.time-input {
				flex: 1;
				padding: 24rpx;
				border: 1rpx solid #e9ecef;
				border-radius: 16rpx;
				font-size: 28rpx;
				background: #f8f9fa;
				text-align: center;
				transition: all 0.3s ease;
				
				&:focus {
					border-color: #667eea;
					background: #fff;
					box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
				}
			}
			
			.time-separator {
				font-size: 28rpx;
				color: #666;
				font-weight: bold;
			}
		}
		
		.switch-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;
			background: #f8f9fa;
			border-radius: 16rpx;
			border: 1rpx solid #e9ecef;
			
			.switch-label {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
			
			.switch-toggle {
				width: 80rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background: #e0e0e0;
				position: relative;
				transition: all 0.3s ease;
				
				&.active {
					background: #4caf50;
				}
				
				.toggle-thumb {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					background: #fff;
					position: absolute;
					top: 2rpx;
					left: 2rpx;
					transition: all 0.3s ease;
					box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
					
					&.active {
						left: 42rpx;
					}
				}
			}
		}
		
		.radio-group {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
			
			.radio-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				border: 1rpx solid #e9ecef;
				transition: all 0.3s ease;
				
				&.active {
					background: rgba(102, 126, 234, 0.1);
					border-color: #667eea;
				}
				
				.radio-input {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #e0e0e0;
					margin-right: 16rpx;
					position: relative;
					transition: all 0.3s ease;
					
					&.active {
						border-color: #667eea;
						background: #667eea;
						
						&::after {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background: #fff;
						}
					}
				}
				
				.radio-label {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}
				
				.radio-desc {
					font-size: 24rpx;
					color: #666;
					margin-top: 4rpx;
				}
			}
		}
	}
}

.save-button {
	position: fixed;
	bottom: 32rpx;
	left: 32rpx;
	right: 32rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border-radius: 24rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.95);
	}
}

.empty-state {
	text-align: center;
	padding: 120rpx 32rpx;
	
	.empty-icon {
		font-size: 120rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 32rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 16rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.6);
	}
}
</style> 